<template>
  <el-select :value="value" :multiple="multiple" clearable reserve-keyword
             :placeholder="$tt('tip_search_sku_code_or_name')" :loading="loading" filterable remote :remote-method="remoteMethod"
             @change="selectSku" default-first-option v-bind="$attrs" v-on="$listeners">

    <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.skuName + ' [' + item.skuOnlyCode + '] ' ">

      <span style="float: left">{{ item.skuName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.skuOnlyCode }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "wms_sku_single_select",
  data() {
    return {
      options: [],
      loading: false,
    }
  },
  props: {
    value: null,
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
  },
  mounted() {
    this.remoteMethod()
  },
  methods: {
    selectSku(e) {
      this.$emit("changeItem", _.find(this.options, it => it.id == e))
    },
    remoteMethod(query) {
      let data = {}
      data.skuCodeOrName = query
      this.loading = true
      this.$ajax({
        url: "/wms-api/sku/WmsSkuInfoRpc/selectSimpleLike.json",
        method: 'post',
        data,
        tip: false,
        success: (res) => {
          if (res.data.rows) this.options = res.data.rows
        },
        failure: () => {
          this.options = []
        },
        complete: () => {
          this.loading = false
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
